<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    style="width: 30%; height: auto !important; background: #222222; padding: 0"
    :before-close="close"
    :modal="false"
  >
    <template #title>
      <div style="padding: 24px 32px; font-size: 16px; color: #fff">购买人气值</div>
    </template>
    <div class="recharge-box">
      <div class="top">
        <div v-for="(item, index) in list" :key="index" class="item">
          <div class="item-top">
            <div class="label m-t-10">
              {{ item.value }}
              <span class="icon"></span>
            </div>
            <div class="value">
              {{ item.value * 30 }}
              <span style="font-size: 10px">人气值</span>
            </div>
          </div>
          <div class="item-bottom m-t-10">
            <div
              class="subtract"
              @click="
                () => {
                  if (item.num !== 0) item.num--;
                }
              "
            >
              -
            </div>
            <div class="center">{{ item.num }}</div>
            <div class="add" @click="item.num++">+</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="left flex">
        <span>余额：{{ balance }}</span>
        <span class="icon m-l-4"></span>
        <span class="recharge" @click="toRecharge">充值</span>
      </div>
      <div class="right flex">
        <span>合计：{{ total }}</span>
        <span class="icon m-l-4"></span>
        <span class="purchase" @click="handleSubmit">购买</span>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);
const balance = ref(1200); // 账户余额
const emit = defineEmits(["submit", "toRecharge"]);
const show = () => {
  dialogVisible.value = true;
};
const close = () => {
  dialogVisible.value = false;
};
interface ListItem {
  value: number;
  num: number;
}
const list = ref<ListItem[]>([
  {
    value: 1,
    num: 0,
  },
  {
    value: 10,
    num: 0,
  },
  {
    value: 100,
    num: 0,
  },
  {
    value: 1000,
    num: 0,
  },
]);

// 合计
const total = computed(() => {
  let result = 0;
  list.value.map((item: ListItem) => {
    result += item.value * item.num;
  });
  return result;
});
const handleSubmit = () => {
  emit("submit", total.value);
};
//充值
const toRecharge = () => {
  emit("toRecharge");
};

defineExpose({
  show,
  close,
});
</script>
<style lang="scss" scoped>
.recharge-box {
  width: 100%;
  border-top: 1px solid #e7e7e7;
  color: #fff;
  padding: 24px 32px 132px;
  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    .item {
      min-width: 144px;
      text-align: center;

      &-top {
        width: 100%;
        min-height: 30px;
        border-radius: 4px;
        padding: 16px 0;
        background: #383838;
        .value {
          font-size: 18px;
        }
        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2px;
          font-size: 14px;
        }
      }
      &-bottom {
        display: flex;
        gap: 4px;

        .add,
        .subtract {
          width: 32px;
          height: 32px;
          line-height: 32px;
          background: #383838;
          border-radius: 2px;
          font-size: 18px;
          cursor: default;
          -webkit-user-select: none; /* Safari */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE 10+ */
          user-select: none; /* 标准语法 */
        }
        .center {
          line-height: 32px;
          flex: 1;
          border-radius: 2px;
          font-size: 14px;
          background: #383838;
        }
      }
    }
  }
}
.icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  background-color: orange;
}
.btns {
  text-align: right;
  padding: 20px 32px 26px;
  border-top: 1px solid #e7e7e7;
  display: flex;
  justify-content: space-between;
  color: #fff;
  .flex {
    display: flex;
    align-items: center;
    .recharge {
      color: #ff4e6c;
      font-size: 14px;
      margin-left: 2px;
      cursor: default;
    }
    .purchase {
      padding: 7px 15px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px 4px 4px 4px;
      margin-left: 12px;
      color: #ff4e6c;
      font-size: 12px;
    }
  }
}
</style>
